<!--
*@Author: QWP
*@Description: 转正管理
*@Date 2024-09-29 09:55
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <u-search-header>
      <u-form
        :model="searchF.model"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto">
        <a-col>
          <a-space>
            <u-icon-button @click="getSearch(1)">查询</u-icon-button>
            <u-icon-button itype="export" @click="exportBtn">导出</u-icon-button>
          </a-space>
        </a-col>
        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <u-icon-button itype="add" @click="toEdit(1)">新增申请</u-icon-button>
              <u-icon-button itype="edit" @click="toEdit(2)">修改申请</u-icon-button>
              <u-icon-button itype="report" @click="">提交申请</u-icon-button>
              <u-icon-button itype="delete" @click="deleteBtn">删除 </u-icon-button>
            </a-space>
          </a-row>
        </a-col>
      </u-form>
    </u-search-header>
    <u-table-content class="f-padding-rl24">
      <u-table
        :columns="columns"
        :data="tabData"
        :loading="loading"
        v-model:pagination="pagenation"
        :scroll="{ y: useTableScroll() }"
        @onDblclick="(record) => {
          keyid = record['keyid'];
          showEdit = true
        }"
        @onSelect="({ selectedRows }) => tabSelData = selectedRows"
        @change="getSearch"
      ></u-table>
    </u-table-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit v-model:open="showEdit"
    width="70%"
    :title="dialogTitle" 
    :keyid="keyid"
    wrap-class-name="full-modal"
    @close="keyid = ''"
    @success="showEdit = false, getSearch()"/>
  
</template>

<script lang="ts" setup>
import { ref, reactive, computed, h, watch, onMounted } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave} from "vue-router";
import { useBaseStore } from '@/store'
import { storeToRefs } from "pinia";
import { _IFormEl } from "@/components/common/form/interface";
import { ColProps, FormItemProps, TableColumnProps } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { numberC, alertC, messageC } from '@/util/common'
import { formatAmt, } from '@/util/format.ts'
import dayjs from "dayjs";
import Edit from './Edit.vue'
import { cloneDeep } from 'lodash'
import * as carApi from '@/service/administration/carBase'
import { useTableScroll } from '@/hooks/useTable'

const route = useRoute();
const router = useRouter();

const keyid = ref<string>('')

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const searchF = reactive({
  model: {
    keywords: null,
  },
  current: 1,
  size: 20,
});
const formItemProps: FormItemProps = {
  labelWidth: '60px',
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = [
  { label: "关键字", key: "keywords", element: "input", col: { span: 4 }, 
    formItemProps: formItemProps, 
    componentProps: { placeholder: '姓名' }
  },
];

// 列表
const loading = ref<boolean>(false)
const tabData = ref<any[]>([
  { key1: '丁艳玲', key2: '待转正', key3: '2022-01-01', key4: '未申请', key5: '正式', key6: '研发部'},
  { key1: '马权', key2: '待转正', key3: '2022-01-01', key4: '未申请', key5: '正式', key6: '研发部'},
]);
const tabSelData = ref<any[]>([]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "index", title: "序号", width: 50, align: 'center',
    customRender: ({ index }) => index += 1
  },
  { dataIndex: "key1", title: "人员名称", width: 100, align: 'center' },
  { dataIndex: "key2", title: "转正状态", width: 100, align: 'center' },
  { dataIndex: "key3", title: "转正日期", width: 100, align: 'center' },
  { dataIndex: "key4", title: "转正申请", width: 100, align: 'center' },
  { dataIndex: "key5", title: "人员类型", width: 100, align: 'center' },
  { dataIndex: "key6", title: "部门", width: 100, align: 'center' },
  { dataIndex: "key7", title: "职务", width: 100, align: 'center' },
  { dataIndex: "key8", title: "职级", width: 100, align: 'center' },
  { dataIndex: "do", title: "操作", width: 100, align: 'center' ,
    customRender: ({}) => {
      return h("span", { style: { color: '#1890ff' } }, "确认转正")
    }
  },
]);

// 编辑
let dialogTitle = ref<string>("车辆信息编辑")
let showEdit = ref<boolean>(false)
let showTransfer = ref<boolean>(false)

onMounted(()=> {
  // getSearch()
})

// 列表查询
const getSearch = async (current?: number) => {
  return
  if (current == 1) {
    pagenation.current = current;
  }
  loading.value = true;
  try {
    let tform = cloneDeep(searchF);
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;
    const data = await carApi.page(searchF)
    tabData.value = data.data.records
    pagenation.total = data.data.total
    tabSelData.value = []
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
}

// type 1 新增、  2 编辑
const toEdit = (type: number) => {
  if(type == 2) {
    if(tabSelData.value.length != 1) {
      alertC("能且只能选择一条数据进行编辑！");
      return
    }
    keyid.value = tabSelData.value[0].keyid;
  }
  showEdit.value = true;
  dialogTitle.value = "车辆基本信息编辑";
}

// 删除
const deleteBtn = () => {
  if (tabSelData.value.length == 0) {
    alertC("请先选择要删除的数据!", "warning");
    return;
  }
  let ids = tabSelData.value.map((item) => item.keyid);
  alertC("确定删除选中的数据?", 'confirm').then(async () => {
    try {
      loading.value = true;
      const data = await carApi.del({ ids: ids.join(",") });
      if (data.code == 0) {
        messageC(data.msg, "success");
        getSearch();
      } else {
        alertC(data.msg, "warning");
      }
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  })
}

// 导出
const exportBtn = async () => {
  try {
    loading.value = true;
    const res = await carApi.download({ ...searchF, size: -1, filename: "车辆基本信息" })
    loading.value = false;
  } catch (error) { }
  loading.value = false;
}

</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
